document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('preview-canvas');
    const ctx = canvas.getContext('2d');
    const backgroundUpload = document.getElementById('background-upload');
    const textInput = document.getElementById('text-input');
    const fontSelect = document.getElementById('font-select');
    const colorPicker = document.getElementById('color-picker');
    const fontSizeInput = document.getElementById('font-size');
    const fontSizeValue = document.getElementById('font-size-value');
    const exportPngBtn = document.getElementById('export-png');
    const exportJpgBtn = document.getElementById('export-jpg');

    // 设置画布尺寸为 3:4
    canvas.width = 600;
    canvas.height = 800;

    let backgroundImage = null;

    // 上传背景图片
    backgroundUpload.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = (event) => {
                backgroundImage = new Image();
                backgroundImage.onload = () => {
                    drawCanvas();
                };
                backgroundImage.src = event.target.result;
            };
            reader.readAsDataURL(file);
        }
    });

    // 字号调节显示当前值
    fontSizeInput.addEventListener('input', () => {
        fontSizeValue.textContent = `${fontSizeInput.value}px`;
        drawCanvas();
    });

    // 实时预览
    [textInput, fontSelect, colorPicker].forEach(element => {
        element.addEventListener('input', drawCanvas);
    });

    // 导出为 PNG
    exportPngBtn.addEventListener('click', () => {
        const link = document.createElement('a');
        link.download = 'redbook_image.png';
        link.href = canvas.toDataURL('image/png');
        link.click();
    });

    // 导出为 JPG
    exportJpgBtn.addEventListener('click', () => {
        const link = document.createElement('a');
        link.download = 'redbook_image.jpg';
        link.href = canvas.toDataURL('image/jpeg', 0.9);
        link.click();
    });

    // 绘制画布
    function drawCanvas() {
        // 清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制背景图片
        if (backgroundImage) {
            ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
        }

        // 获取文字内容
        const text = textInput.value;
        const lines = text.split('\n');
        const fontSize = fontSizeInput.value;
        const fontFamily = fontSelect.value;
        const textColor = colorPicker.value;
        const lineHeight = parseInt(fontSize) * 1.5;
        const bottomMargin = 60; // 最后一行文字距离底部的距离

        // 设置文字样式
        ctx.font = `${fontSize}px ${fontFamily}`;
        ctx.fillStyle = textColor;
        ctx.textAlign = 'center';

        // 计算起始 Y 坐标
        const startY = canvas.height - bottomMargin - (lines.length - 1) * lineHeight;

        // 绘制每一行文字
        lines.forEach((line, index) => {
            const y = startY + index * lineHeight;
            ctx.fillText(line, canvas.width / 2, y);
        });
    }
});